<template>
    <div>
        <div
            class="contant"
            style="padding-top: 20px"
        >
            <div class="operatingArea">
                <div class="filter">
                    <div class="filter-item">
                        <label for="">所属单位：</label>
                        <el-select
                            v-model="searchForm.depId"
                            class="m-2"
                            placeholder="请选择"
                            style="width: 145px"
                            :disabled="localTypeUnit != '1'"
                        >
                            <el-option
                                v-for="item in depIdList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="filter-item">
                        <el-date-picker
                            v-model="searchForm.exportMonth"
                            type="month"
                            clearable
                            placeholder="请选择月份"
                            style="width: 145px"
                        />
                    </div>
                    <div class="filter-item">
                        <el-button
                            type="primary"
                            @click="search"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            @click="reset"
                        >重置</el-button>
                        <el-button
                            type="warning"
                            @click="exportAll"
                            v-loading="exportLoading"
                        >导出全部</el-button>
                        <el-button
                            type="warning"
                            @click="generateFileFn"
                            v-loading="generateFileLoading"
                        >轨迹截图更新</el-button>
                    </div>
                </div>
            </div>

            <div class="exportCard">
                <div
                    class="exportCardItem"
                    v-for="(item, index) in tableData"
                    :key="index"
                >
                    <el-card shadow="always">
                        <div class="exportCardItemConter">
                            <div style="display: flex;flex-direction: row;align-items: center;">
                                <img
                                    class="leave"
                                    src="../../../assets/images/downLoad.png"
                                >
                                <span>{{ item.fileName }}</span>
                            </div>
                            <el-button
                                type="primary"
                                @click="exportList(item)"
                                size="small"
                            >导出</el-button>
                        </div>
                    </el-card>
                </div>
            </div>
            <el-empty
                description="暂无数据"
                v-show="tableData.length == 0"
                :image-size="60"
                style="height: 400px;box-sizing:border-box;"
            />
        </div>
    </div>
</template>

<script setup>
import exportRecordHttp from "@/https/exportRecord.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage } from "element-plus";
import moment from 'moment';
import { onMounted, reactive, ref } from "vue";
const isSupervisor = ref(false)
const roleNames = ref(Storage.localGet("roleNames"))
if (roleNames.value.includes('supervisor')) {
    isSupervisor.value = true
}
const activeName = ref(0)
const searchForm = reactive({
    depId: '',
    exportMonth: moment().add(-1, 'month').format('YYYY-MM'),
    pageNo: 1,
    pageSize: 10
})
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value + "";
const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const tableData = ref([])
const reset = async () => {
    searchForm.depId = localTypeUnit.value + "";
    searchForm.exportMonth = moment().format('YYYY-MM')
    searchForm.pageNo = 1
    searchForm.pageSize = 10
    search()
}
const search = async () => {
    let params = {
        depId: searchForm.depId,
        exportMonth: moment(searchForm.exportMonth).format('YYYY-MM'),
        pageNo: searchForm.pageNo,
        pageSize: searchForm.pageSize
    };
    const res = await exportRecordHttp.getExportFileList(params)
    console.log(res.data)
    if (res.data.code == 200) {
        console.log(res.data.data.records)
        tableData.value = res.data.data.records
    }
}

const exportList = (row) => {
    exportRecordHttp.exportFileDownload(row).then((response) => {
        console.log(response);
        const content = response.data;
        const blob = new Blob([content], { type: row.exportType == 1 || row.exportType == 3 ? "application/ms-excel" : "application/msword" });
        let fileName = row.fileName;
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};
const exportLoading = ref(false)
const exportAll = () => {
    exportLoading.value = true
    exportRecordHttp.exportFileDownloadAll({
        depId: searchForm.depId,
        exportMonth: moment(searchForm.exportMonth).format('YYYY-MM')
    }).then((response) => {
        console.log(response);
        exportLoading.value = false
        const content = response.data;
        const blob = new Blob([content], { type: "application/zip" });
        let fileName = '文件.zip';
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};
const generateFileLoading = ref(false)
const generateFileFn = async () => {
    generateFileLoading.value = true
    let params = {
        exportMonth: moment(searchForm.exportMonth).format('YYYY-MM'),
    };
    const res = await exportRecordHttp.generateFile(params)
    console.log(res.data)
    if (res.data.code == 200) {
        generateFileLoading.value = false
        ElMessage({
            message: "刷新成功",
            type: "success",
        });
    }
}

onMounted(() => {
    search()
})
</script>

<style scoped lang="less">
.contant {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding-bottom: 16px;
    :deep(.el-tabs__nav) {
        padding: 0 20px !important;
    }
    :deep(.el-tabs__item) {
        font-weight: 400 !important;
        font-size: 14px;
    }
    :deep(.el-tabs__nav-wrap:after) {
        height: 1px;
    }
    :deep(.el-tab-pane) {
        padding: 0;
    }
    .operatingArea {
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .addBtn {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
}
.exportCard {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 20px;
    .exportCardItem {
        width: 32%;
        padding: 0.5%;
        .exportCardItemConter {
            display: flex;
            flex-direction: row;
            align-items: center;
            img {
                width: 60px;
                height: 60px;
                margin-right: 5px;
            }
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            span {
                display: inline-block;
                line-height: 1.5;
                font-size: 14px;
                padding: 0 4px;
            }
        }
    }
}
</style>
